<template>
    <div class="dashboard-container">
        <!-- 顶部导航 -->
        <div class="top-nav">
            <div class="nav-item" :class="{ active: activeTab === 0 }" @click="changeTab(0)">健康数据</div>
            <div class="nav-item" :class="{ active: activeTab === 1 }" @click="changeTab(1)">多维度</div>
            <div class="nav-item" :class="{ active: activeTab === 2 }" @click="changeTab(2)">数据详情</div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <!-- 雷达图 -->
            <div ref="chartContainer" class="chart"></div>

            <!-- 数据描述 -->
            <div class="data-description">
                <div class="data-item" v-for="(value, key) in data" :key="key">
                    <span class="data-label">{{ key }}</span>
                    <span class="data-value" :style="{
                        color:
                            value === 33.4
                                ? '#9f9a70' // 紫色
                                : value === 31.2
                                    ? '#237d48' // 绿色
                                    : value === 26.9
                                        ? '#ff69b4' // 粉色
                                        : value === 16.7
                                            ? '#ffd700' // 黄色
                                            : value === 28.5
                                                ? '#ffa500' // 橙色
                                                : '#fff' // 默认白色
                    }">
                        {{ value }}%
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const activeTab = ref(1); // 当前激活的标签索引

// 切换标签方法
const changeTab = (index: number) => {
    activeTab.value = index;
};

// 图表数据
const data = {
    工作就业: 33.4,
    医疗保健: 31.2,
    社会治安: 26.9,
    居住环境: 16.7,
    国家政策: 28.5
};

const chartContainer = ref<HTMLElement | null>(null);

onMounted(() => {
    if (chartContainer.value) {
        const chart = echarts.init(chartContainer.value);

        const option = {
            tooltip: {},
            radar: {
                indicator: Object.keys(data).map((key) => ({
                    name: key,
                    max: 100
                })),
                shape: "polygon",
                splitNumber: 4,
                axisName: {
                    color: "#fff"
                },
                splitArea: {
                    areaStyle: {
                        color: [
                            "rgba(226, 219, 95, 0.5)", // 最外层 - 黄色
                            "rgba(236, 78, 173, 0.5)", // 第二层 - 粉色
                            "rgba(21, 169, 46, 0.5)", // 第三层 - 绿色
                            "rgba(136, 83, 227, 0.5)" // 第四层 - 紫色
                        ]
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: [
                            "rgb(226, 219, 95)", // 最外层 - 黄色
                            "rgb(236, 78, 173)", // 第二层 - 粉色
                            "rgb(21, 169, 46)", // 第三层 - 绿色
                            "rgb(136, 83, 227)" // 第四层 - 紫色
                        ],
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#fff"
                    }
                }
            },
            series: [
                {
                    name: "维度数据",
                    type: "radar",
                    data: [
                        {
                            value: Object.values(data),
                            name: "数据"
                        }
                    ],
                    areaStyle: {
                        color: "rgba(0, 255, 255, 0.3)"
                    },
                    lineStyle: {
                        color: "#00ffff"
                    },
                    symbol: "circle",
                    symbolSize: 4.8, /* 原来是 6 */
                    itemStyle: {
                        color: "#fff"
                    }
                }
            ]
        };

        chart.setOption(option);
    }
});
</script>

<style scoped>
/* 整体布局 */
.dashboard-container {
    color: #fff;
    padding: 16.2px;
    border-radius: 8.1px;
    width: calc(100% + 8.5vh);
    max-width: calc(480px + 8.5vh);
    margin: 0 auto;

    /* 顶部导航 */
    .top-nav {
        display: flex;
        margin-bottom: 16.2px;
        .nav-item {
            padding: 7.2px 16.2px;
            cursor: pointer;
            font-size: 12px;
            color: #fff;
            height: 8px;
            width: 56px;
            text-align: center;
            line-height: 8px;
            border: 1.35px solid transparent;
            border-radius: 3.6px;
            transition: all 0.3s ease;
        }

        .nav-item:nth-child(2) {
            margin-left: calc(80px + 8.5vh);
            clip-path: polygon(20% 0, 90% 0, 90% 100%, 0 100%);
            border: 1.6px solid rgb(8, 110, 112);
        }

        .nav-item:nth-child(3) {
            clip-path: polygon(20% 0, 90% 0, 90% 100%, 0 100%);
            border: 1.6px solid rgb(8, 110, 112);
        }

        .nav-item.active {
            background-color: rgb(32, 174, 226);
        }
    }

    /* 内容区域 */
    .content {
        display: flex;
        align-items: center; /* 垂直居中 */
        /* 图表区域 */
        .chart {
            width: calc(486px + 8.5vh);
            height: 270px;
            margin-left: -24px;
            /* 数据描述 */
            .data-description {
                gap: 5px;
                .data-item {
                    font-size: 9.072px;
                }
            }
        }
    }
}
.data-label {
    font-size: 9.072px;
}

.data-value {
    font-size: 18.175px;
    font-weight: bold;
}
</style>